@use 'node_modules/@angular/material' as mat;

@use './gio-palettes' as gio;

@import './material-layout-compatibility';

$gio-typography: mat.define-typography-config(
  $font-family: '"Libre Franklin", Roboto, "Helvetica Neue", sans-serif',
  $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $display-1: mat.define-typography-level(34px, 40px, 400),
  $headline: mat.define-typography-level(24px, 32px, 400),
  $title: mat.define-typography-level(20px, 32px, 500),
  $subheading-2: mat.define-typography-level(16px, 28px, 400),
  $subheading-1: mat.define-typography-level(15px, 24px, 400),
  $body-2: mat.define-typography-level(14px, 24px, 500),
  $body-1: mat.define-typography-level(14px, 20px, 400),
  $caption: mat.define-typography-level(12px, 20px, 400),
  $button: mat.define-typography-level(14px, 14px, 500),
  $input: mat.define-typography-level(inherit, 1.125, 400),
);

$gio-theme: mat.define-light-theme(
  (
    color: (
      primary: gio.$gio-primary-palette,
      accent: gio.$gio-accent-palette,
      warn: gio.$gio-error-palette,
    ),
    typography: $gio-typography,
  )
);
